<template>
	<view class="page__bd">
		<view class="hb-bar bg-white solid-bottom">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>基础用法
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton title :row="2" :animate="false"></hb-skeleton>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>显示头像
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton title avatar :row="2"></hb-skeleton>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>显示子组件
			</view>
			<view class="action">
				<switch :class="!loading?'checked':''" :checked="!loading?true:false" @change="onIsLoading"></switch>
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton title avatar :row="2" :loading="loading">
				<view class="">实际内容</view>
			</hb-skeleton>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>幻灯片
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton swiper></hb-skeleton>
		</view>

		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>宫格
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton grid  :gridRow="8" :gridRowCol="4"></hb-skeleton>
		</view>
		
		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>列表
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton list ></hb-skeleton>
		</view>
		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>卡片列表
			</view>
		</view>
		<view class="bg-white padding-xs">
			<hb-skeleton cardList ></hb-skeleton>
		</view>
	</view>
</template>

<script>
	import hbSkeleton from '@/components/hb-skeleton/index';
	export default {
		components: {
			hbSkeleton
		},
		data() {
			return {
				loading: true
			}
		},
		methods: {
			onIsLoading() {
				this.loading = !this.loading
			}
		}
	}
</script>

<style lang="less">
</style>
